<html>
	<head>
		
		<!--
				
			Copyright (C) 2010 Tim Beyer
			
			This file is part of Pixelbots.

			Pixelbots is free software: you can redistribute it and/or modify
			it under the terms of the GNU General Public License as published by
			the Free Software Foundation, either version 3 of the License, or
			(at your option) any later version.

			Pixelbots is distributed in the hope that it will be useful,
			but WITHOUT ANY WARRANTY; without even the implied warranty of
			MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
			GNU General Public License for more details.

			You should have received a copy of the GNU General Public License
			along with Pixelbots.  If not, see <http://www.gnu.org/licenses/>.
	
		-->

		<script type="text/javascript" src="js/imageProc.js"></script>
		<script type="text/javascript" src="js/agents.js"></script>
		<script type="text/javascript" src="js/utils.js"></script>
		<script type="text/javascript" src="js/handlers.js"></script>
		<script type="text/javascript" src="js/main.js"></script>
		<script type="text/javascript" src="js/ajaxupload.js"></script>
		
		<!-- JQuery UI -->
		<!--<link type="text/css" href="css/custom-theme/jquery.ui.base.css" rel="Stylesheet" />-->
		<link type="text/css" href="css/ui-darkness/jquery-ui-1.8.custom.css" rel="Stylesheet" />
		<script type="text/javascript" src="js/jquery/jquery-1.4.2.min.js"></script>
		<script type="text/javascript" src="js/jquery/jquery-ui-1.8.custom.min.js"></script>
		

		<link type="text/css" href="css/pixelbots.css" rel="Stylesheet" />

		<title> Pixelbots </title>

	</head>
	<body style="background: black">
		<center>
			<canvas id="can" width="1" height="1" style="border: 1px solid black"></canvas>	
		</center>
		

		<script>

			var canvas; //the canvas
			var ctx; // the context
			var width; //width of the image
			var height;	//height of the image
			var img = new Image(); //the image to convert	
			var defaultImages = new Array(); //an array containing the default image sources
			var originalImage; //the original PixelImage
			var displayImage; //the drawn PixelImage
			var agents; //the Array containing the moving pixels
			var agentTypes = new Array(); //an array that contains references to the different agent functions
			var agent; //the currently selected agent
			var numberAgents = 1; //how many agents to add
			var initDone = false; //is the initialization complete?
			var running = false; //is the animation running?
			var paused = false; //is the program paused?
			
			var settingsHeight; // the height of the settings panel	
			var imagesHeight; //the height of the images panel
			
			$(document).ready(function(){startUp();});
			
			function initUI(){
				updateForms();				
				updateUI();
				//init complete
				initDone = true;		
			}

			function updateUI(){
			
				//hide "load image" if no FileReader is found
				if(window.FileReader == null){
					var fileOpen = document.getElementById("fileOpen");
					$(fileOpen).hide();
					
					//when the ajax upload is complete, check the response
					var complete = function(file, response){
						//The image was rejected
						if(response == false){
							alert("Image too large, please no more than 3MB");
						}
						//we got a data uri back, let's change the image
						else{
							img.onload = function(){ //initialize program when image is loaded
								init();
							};	
							img.src = response;
						}
					}
					//attach open handler
					new AjaxUpload('ajaxUploadButton', {action: 'php/upload-handler.php', onComplete: complete, onSubmit : function(file , ext){
					//check for known extensions
						if (! (ext && /^(jpg|png|jpeg|gif)$/i.test(ext))){
								// extension is not allowed
								alert('Error: invalid file extension');
								// cancel upload
								return false;
						}
					}});					
				}	
				else{
					$(document.getElementById("ajaxFileOpen")).hide();
				}
				
				var settingsToggle = document.getElementById("settingsToggle");
				var imageToggle = document.getElementById("imageToggle");
				
				//check if the height variables are already initialized
				if(typeof(settingsHeight) == "undefined" && typeof(imagesHeight) == "undefined"){
					settingsHeight = $(settingsToggle).height();
					imagesHeight = $(imageToggle).height();		
				}	
				
				updateUIPositions();
				
				//hide the settings until I have a better idea how to do this
				$("#settings").hide("slide",{direction:"down"},10);
				$("#images").hide("slide",{direction:"down"},10);
			}
			
			function updateUIPositions(){
			
				//I am sorry for this part, this just does not feel right.
				//Great programming gods, please don't punish me with those horrible Heisenbugs again.
				
				//get canvas position
				var canvasPos = $('#can').position();
				var left = canvasPos.left;
				var top = canvasPos.top;	
				
				//scale the buttons
				var invertButton = document.getElementById("invertImage");
				var grayScaleButton = document.getElementById("grayscaleImage");
				
				invertButton.style.width = 100;
				grayScaleButton.style.width = 100;
				
				//now to the controls
				var controlsToggle = document.getElementById("controlsBar");
				var controlsStyle = controlsToggle.style;
				
				var controlsWidth = $(controlsToggle).width();
				var controlsHeight = $(controlsToggle).height();
				
				var controlsLeft = (left + width/2 - controlsWidth / 2); //position centered
				controlsStyle.left = controlsLeft;
	
				var controlsTop = top + height - controlsHeight;
				controlsStyle.top = controlsTop;
				controlsStyle.visibility = "visible";	
			

				//position the settings at the lower right

				var settingsStyle = settingsToggle.style;							
				var settingsWidth =  $(settingsToggle).width();				
				
				//apply new position and make visible
				//alert(top+"+"+height+"-"+settingsHeight);
				settingsStyle.left = (left + width - settingsWidth);
				settingsStyle.top = (top + height - settingsHeight);
				settingsStyle.visibility = "visible";
				
				//position the image loader at the lower left


				var imageStyle = imageToggle.style;
								
				var imagesWidth =  $(imageToggle).width();
				
				//apply new position and make visible
				imageStyle.left = (left);
				imageStyle.top = (top + height - imagesHeight);
				imageStyle.visibility = "visible";
				

				//put imageEdit in the middle of the image
				var imageEdit = document.getElementById("imageEdit");
				var imageEditStyle = imageEdit.style;
				
				var imageEditWidth = $(imageEdit).width();
				var imageEditHeight = $(imageEdit).height();
				
				var imageEditLeft = (left + width/2 - imageEditWidth / 2); //position centered
				imageEditStyle.left = imageEditLeft;
	
				var imageEditTop = top + height/2 - imageEditHeight/2; //centered
				imageEditStyle.top = imageEditTop;

			}
			function updateForms(){
				agentCount.value = numberAgents;				
				//update button captions
				var startButton = document.getElementById("startButton");
				if(running || paused){
					startButton.value = "Stop";
				}
				else if(!running && !paused){
					startButton.value = "Start";
				}
				
				var pauseButton = document.getElementById("pauseButton");
				if(paused){
					pauseButton.value = "Play";
				}
				else if(!paused){
					pauseButton.value = "Pause";
				}
					
			}		
			
		</script>
		
		<center>
				
				<div class="imageEdit" id="imageEdit">
					<input type="button" id="invertImage" value="Invert" class="ui-state-default ui-corner-all button imageEditButton">
					<input type="button" id="grayscaleImage" value="Grayscale" class="ui-state-default ui-corner-all button imageEditButton">
				</div>

				<div class="controlsBar" id="controlsBar">
					<input type="button" id="startButton" value="Start" class="ui-state-default ui-corner-all button">
					<input type="button" id="pauseButton" value="Pause" class="ui-state-default ui-corner-all button">
					<input type="button" id="downloadButton" value="Save" class="ui-state-default ui-corner-all button">
				</div>
				
					<input type="button" id="imagesButton" value="Choose image" class="ui-state-default ui-corner-all button">					
					<input type="button" id="settingsButton" value="Settings" class="ui-state-default ui-corner-all button" >
					
				<div class="toggler" id="settingsToggle">
					<div id="settings" class="ui-widget-content ui-corner-all">
						<h3 class="ui-widget-header ui-corner-all">Settings</h3>
						<p>
							<select name="agentType" onchange="loadAgent(this.options[this.selectedIndex].value)">
								<option value="0"> Bright Breeder
								<option value="1"> Bright Seeker
								<option value="2"> Random Growth
							</select>
							<input type="text" size="6" id="agentCount" onfocus="this.value = numberAgents;" onchange="changeAgentCount(this.value);">	
						</p>
					</div>
				</div>
				
				<div class="toggler" id="imageToggle">
					<div id="images" class="ui-widget-content ui-corner-all">
						<h3 class="ui-widget-header ui-corner-all">Select Image</h3>
							<select name="image" onchange="loadImage(this.options[this.selectedIndex].value)">
								<option value="0"> Henning								
								<option value="1"> Stairs
								<option value="2"> Fire 

							</select>
							<div id="fileOpen">
								<p>
								Open local image:
								</p>
								<input type="file" id="fileOpenInput" onchange="handleFiles(this.files);" />
							</div>
							
							<div id="ajaxFileOpen">
								<input type="button" id="ajaxUploadButton" class="button" value="Open image"/>
							</div>
					</div>
				</div>

				<script>
					//Attach the event handlers to the UI elements
					attachHandlers();
				</script>
				
				<br><br>

				<input type="button" value="Sources" onclick="document.location = 'http://pixelbots.googlecode.com'" class="ui-state-default ui-corner-all button"/>
		</center>

	</body>
</html>